<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>XX培训网</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/static/css/sm.css">
    <link rel="stylesheet" href="/static/css/sm.min.css">
    <link rel="stylesheet" href="/static/css/sm-extend.min.css">


    <!--icon css-->
    <link rel="stylesheet" href="/static/css/icon-style.css">
    <style>
        .tc {
            width: 100%;
            height: 2.5rem;
        }
        p {
            margin: 0.1rem 0 !important;
        }

        .content-padded {
            padding: 0.2rem 0;
            background: white;
            border-radius: 0.3rem;
        }

        .card {
            width: 47% !important;
            border-radius: 0.3rem;
            float: left;
            margin: 0 0 3% 3%;
        }

        .card-footer, .card-header {
            padding: 0.3rem !important;
        }

        .card-footer:before {
            left: auto;
            width: 90%;
        }

        .row > .col-33:active {
            background: gainsboro;
        }


        .cu-modal {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1110;
            opacity: 0;
            outline: 0;
            text-align: center;
            -ms-transform: scale(1.185);
            transform: scale(1.185);
            backface-visibility: hidden;
            perspective: 1000px;
            background: rgba(0, 0, 0, 0.6);
            transition: all 0.3s ease-in-out 0s;
            pointer-events: none;
        }

        .cu-modal::before {
            content: "\200B";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        .cu-modal.show {
            opacity: 1;
            transition-duration: 0.3s;
            -ms-transform: scale(1);
            transform: scale(1);
            overflow-x: hidden;
            overflow-y: auto;
            pointer-events: auto;
        }

        .cu-dialog {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            margin-left: auto;
            margin-right: auto;
            width: 86.7%;
            max-width: 100%;
            background-color: #f8f8f8;
            border-radius: 5px;
            overflow: hidden;
        }



        .my-card{
        }
        .my-card .my-item{
            width: 100%;
            min-height: 100px;
            border-radius: 4px;
            margin-bottom: 0.5rem;
            box-shadow: 3px 3px 3px rgb(200,200,200);
            display: flex;
            padding: 0.5rem;
            align-items: center;
            justify-content: center;
            justify-items: center;
            background: #fff;
        }
        .my-item img{
            width: 64px;
            height: 64px;
            border-radius: 4px;
            margin-right: 0.5rem;
        }
        .my-item .my-content{
            flex: 1;
            line-height: 1rem;
            text-align: left;
        }
        .content-block {
            margin: 0;
        }
        .list-block .item-title.label {
            width: 90px;
            -webkit-flex-shrink: 0;
            -ms-flex: 0 0 auto;
            -webkit-flex-shrink: 0;
            flex-shrink: 0;
            margin: 4px 0;
            text-align: left;
        }
        .list-block .item-media+.item-inner {
            margin-left: 0;
        }
    </style>
</head>

<body>
<!-- 头部-->
<header class="bar bar-nav">
    <h1 class="title">XX培训网</h1>
</header>
<div class="content">
    <div class="buttons-tab">
        <a href="#tab1" class="tab-link active button">用户</a>
        <a href="#tab2" class="tab-link button">兴趣分类</a>
        <a href="#tab3" class="tab-link button">兴趣班</a>
        <a href="#tab4" class="tab-link button">学习资料</a>
    </div>
    <div class="">
        <div class="tabs">
            <div id="tab1" class="tab active">
                <div class="content-block">
                    <div class="" style="padding: 0.5rem  0"><a href="#" class="button button-big button-fill button-primary" onclick="addUserBtn()">新增用户</a></div>
                    <div class="my-card"></div>
                    <div class="cu-modal" >
                        <div class="cu-dialog bg-white padding-tb-sm">
                            <div class="list-block">
                                <ul>
                                    <!-- Text inputs -->
                                    <li>
                                        <div class="item-content">
                                            <div class="item-media"> </div>
                                            <div class="item-inner">
                                                <div class="item-title label">姓名</div>
                                                <div class="item-input">
                                                    <input id="name" type="text" placeholder="Your name">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <!-- Text inputs -->
                                    <li>
                                        <div class="item-content">
                                            <div class="item-media"> </div>
                                            <div class="item-inner">
                                                <div class="item-title label">学号</div>
                                                <div class="item-input">
                                                    <input id="sno" type="number" placeholder="Your sNo">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="item-content">
                                            <div class="item-media"><i class="icon icon-form-password"></i></div>
                                            <div class="item-inner">
                                                <div class="item-title label">登录账号</div>
                                                <div class="item-input">
                                                    <input id="amount" type="text" placeholder="Amount" class="">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="align-top">
                                        <div class="item-content">
                                            <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                            <div class="item-inner">
                                                <div class="item-title label">个人介绍</div>
                                                <div class="item-input">
                                                    <textarea id="intro" placeholder="介绍"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </div>

                            <div class="content-block">
                                <div class="row">
                                    <div class="col-50"><div class="button button-big button-fill button-danger" onclick="hideModal()">返回</div></div>
                                    <div class="col-50"><div class="button button-big button-fill button-success">保存</div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tab2" class="tab">
                <div class="content-block">
                    <p>This is tab 2 content</p>
                </div>
            </div>
            <div id="tab3" class="tab">
                <div class="content-block">
                    <p>This is tab 3 content</p>
                </div>
            </div>
            <div id="tab4" class="tab">
                <div class="content-block">
                    <p>This is tab 4 content</p>
                </div>
            </div>
        </div>
    </div>
</div>


<!--<nav class="bar bar-tab">-->
<!--    <a class="tab-item active" href="/page/indexPage">-->
<!--        <span class="icon icon-home"></span>-->
<!--        <span class="tab-label">首页</span>-->
<!--    </a>-->
<!--    <a class="tab-item" href="/page/setting">-->
<!--        <span class="icon icon-user"></span>-->
<!--        <span class="tab-label">我的</span>-->
<!--    </a>-->
<!--</nav>-->

<script type='text/javascript' src='/static/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm-extend.js' charset='utf-8'></script>
<script type="text/javascript" src="/static/js/deatilPage.js"></script>
<script type="text/javascript">
    //    页面初始化
    let userInfo = JSON.parse(localStorage.getItem('userInfo'));


    $(document).ready(function () {
        initUser();
    });

    function hideModal() {
        $('.cu-modal').removeClass('show')
    }



    /**
     * 初始化兴趣班
     */
    function initInteClass(){
        $.ajax({
            url: '/front/user/myInteClass',
            type: 'get',
            dataType: 'json',
            data:{
                userId:userInfo.id
            },
            success: function (re) {

                var data = re.data;
                if (!re.status) {
                    var result = '';
                    if(!data||data.length<1){
                        $('.inteClass').html('您还没有报过兴趣班哦！');
                        return false;
                    }
                    for (var i = 0; i < data.length; i++) {
                        result += "<div class=\"col-25 margin-top-xs\" onclick='inteDetailPage("+data[i].id+")'>\n" +
                            "                <img src='" + data[i].icon + "' onerror=\"this.src='/static/img/loadFail.png';this.onerror='null' \" style=\"width: 2rem\"  title='"+data[i].detail+"'/>" +
                            "                <div>" + data[i].name + "</div>\n" +
                            "            </div>";
                    }
                    $('.inteClass').html(result);
                }
            }
        })
    }


    /**
     * 用户list
     */
    function initUser(){
        $.ajax({
            url:'/back/user/list',
            type: 'get',
            dataType: 'json',
            data:{
              pn:1,
              pageSize:10000
            },
            success:function(re){
                var res = '';
                for(var item of re.data.list){
                    res+=

                        "		<div class=\"my-item\">\n" +
                        "				<img src=\""+item.icon+"\" onerror=\"this.src='/static/img/loadFail.png';this.onerror='null' \" class=\"headImg\" />\n" +
                        "				<div class=\"my-content\">\n" +
                        "						<div style='font-size: 1rem'>"+item.name+"</div>\n" +
                        "						<div style='font-size: 0.8rem'>"+item.intro+"</div>\n" +
                        "				</div>\n" +
                        "		</div>\n"
                }
                $("#tab1").children(".content-block").children(".my-card").html(res);
            },fail:function () {

            }
        })
    }

    /**
     * 新增用户按钮
     */
    function addUserBtn(){
        $('.cu-modal').addClass('show')
    }
</script>
</body>
</html>
